<div class="component lookup-component">
    <div class="add-new-button-div">
        <div class="add-new-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Add New</h3>
            </div>
            <div class="panel-body">
                <div class="add-button" onclick="addNewHandle()">
                </div>
            </div>
        </div>
    </div>
    <div class="add-div add-lookup-div">
    </div>
    <div class="data-div">
        <div class="query-div">
            <div class="query-form">
                <input type="text" class="query-input form-control" placeholder="input code or name" />
            </div>
            <div class="operation-div">
                <div class="query-button"></div>
            </div>
        </div>
        <div class="data-list lookup-list">
        </div>
    </div>

    <div class="templates">
        <div class="item-panel lookup-item-panel">
            <div class="self">
                <div class="id-div element-div">
                </div>
                <div class="code-div element-div">
                </div>
                <div class="name-div element-div">
                </div>
                <div class="value-div element-div">
                </div>
                <div class="order-div element-div">
                </div>
                <div class="description-div element-div">
                </div>
                <div class="operation-button-wrap">
                    <div class="modify-button" title="Edit Lookup Item"></div>
                    <div class="delete-button" title="Delete Lookup Item"></div>
                </div>
            </div>
        </div>

        <div class="edit-data-panel edit-lookup-panel panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title"></div>
            </div>
            <div class="panel-body">
                <div class="code-element edit-panel-element">
                    <div class="code-label edit-element-label required">code:</div>
                    <div class="input-div">
                        <input name="code" class="code-value edit-element-value form-control" maxlength="30" />
                    </div>
                </div>
                <div class="name-element edit-panel-element">
                    <div class="name-label edit-element-label required">name:</div>
                    <div class="input-div">
                        <input name="name" class="name-value edit-element-value form-control" maxlength="80" />
                    </div>
                </div>
                <div class="description-element edit-panel-element">
                    <div class="description-label edit-element-label">description:</div>
                    <div class="input-div">
                        <textarea name="description"
                            class="description-value edit-textarea-element-value form-control"></textarea>
                    </div>
                </div>
                <button type="button" class="save-button save-group-button btn btn-primary">
                    Save
                </button>
                <button type="button" class="cancel-button cancel-group-button btn btn-success">
                    Cancel
                </button>
            </div>
        </div>

        <div class="edit-item-panel edit-lookup-item-panel panel panel-primary form-horizontal">
            <div class="subject">Update Lookup Item</div>
            <div class="code-element edit-panel-element form-group">
                <div class="code-label edit-element-label required">code:</div>
                <div class="input-div">
                    <input name="code" class="code-value edit-element-value form-control" maxlength="30" />
                </div>
            </div>
            <div class="name-element edit-panel-element form-group">
                <div class="name-label edit-element-label required">name:</div>
                <div class="input-div">
                    <input name="name" class="name-value edit-element-value form-control" maxlength="80" />
                </div>
            </div>
            <div class="value-element edit-panel-element form-group">
                <div class="value-label edit-element-label required">value:</div>
                <div class="input-div">
                    <input name="value" class="value-value edit-element-value form-control" />
                </div>
            </div>
            <div class="order-element edit-panel-element form-group">
                <div class="order-label edit-element-label required">order:</div>
                <div class="input-div">
                    <input name="order" type="number" min="1" step="1"
                        class="order-value edit-element-value form-control" maxlength="10" />
                </div>
            </div>
            <div class="description-element edit-panel-element form-group">
                <div class="description-label edit-element-label">description:</div>
                <textarea name="description" class="description-value edit-element-value form-control" />
            </div>

            <div class="other-attribute-wrap">
                <div class="show-other-attribute-button"></div>
                <div class="other-attribute">
                    <div class="attribute1-element edit-panel-element">
                        <div class="attribute1-label edit-element-label">attribute1:</div>
                        <div class="input1-div">
                            <input class="attribute1-value edit-element-value form-control" maxlength="100" />
                        </div>
                    </div>
                    <div class="attribute2-element edit-panel-element">
                        <div class="attribute2-label edit-element-label">attribute2:</div>
                        <div class="input-div">
                            <input class="attribute2-value edit-element-value form-control" maxlength="100" />
                        </div>
                    </div>
                    <div class="attribute3-element edit-panel-element">
                        <div class="attribute3-label edit-element-label">attribute3:</div>
                        <div class="input-div">
                            <input class="attribute3-value edit-element-value form-control" maxlength="100" />
                        </div>
                    </div>
                    <div class="attribute4-element edit-panel-element">
                        <div class="attribute4-label edit-element-label">attribute4:</div>
                        <div class="input-div">
                            <input class="attribute4-value edit-element-value form-control" maxlength="100" />
                        </div>
                    </div>
                    <div class="attribute5-element edit-panel-element">
                        <div class="attribute5-label edit-element-label">attribute5:</div>
                        <div class="input-div">
                            <input class="attribute5-value edit-element-value form-control" maxlength="200" />
                        </div>
                    </div>
                    <div class="attribute6-element edit-panel-element">
                        <div class="attribute6-label edit-element-label">attribute6:</div>
                        <div class="input-div">
                            <input class="attribute6-value edit-element-value form-control" maxlength="200" />
                        </div>
                    </div>
                    <div class="attribute7-element edit-panel-element">
                        <div class="attribute7-label edit-element-label">attribute7:</div>
                        <div class="input-div">
                            <input class="attribute7-value edit-element-value form-control" maxlength="200" />
                        </div>
                    </div>
                    <div class="attribute8-element edit-panel-element">
                        <div class="attribute8-label edit-element-label">attribute8:</div>
                        <div class="input-div">
                            <input class="attribute8-value edit-element-value form-control" maxlength="200" />
                        </div>
                    </div>
                    <div class="attribute9-element edit-panel-element">
                        <div class="attribute9-label edit-element-label">attribute9:</div>
                        <div class="input-div">
                            <input class="attribute9-value edit-element-value form-control" maxlength="200" />
                        </div>
                    </div>
                    <div class="attribute10-element edit-panel-element">
                        <div class="attribute10-label edit-element-label">attribute10:</div>
                        <div class="input-div">
                            <input class="attribute10-value edit-element-value form-control" maxlength="200" />
                        </div>
                    </div>
                    <div class="attribute11-element edit-panel-element">
                        <div class="attribute11-label edit-element-label">attribute11:</div>
                        <div class="input-div">
                            <textarea class="attribute11-value edit-element-value form-control" maxlength="1000" />
                        </div>
                    </div>
                    <div class="attribute12-element edit-panel-element">
                        <div class="attribute12-label edit-element-label">attribute12:</div>
                        <div class="input-div">
                            <textarea class="attribute12-value edit-element-value form-control" maxlength="1000" />
                        </div>
                    </div>
                    <div class="attribute13-element edit-panel-element">
                        <div class="attribute13-label edit-element-label">attribute13:</div>
                        <div class="input-div">
                            <textarea class="attribute13-value edit-element-value form-control" maxlength="1000" />
                        </div>
                    </div>
                    <div class="attribute14-element edit-panel-element">
                        <div class="attribute14-label edit-element-label">attribute14:</div>
                        <div class="input-div">
                            <textarea class="attribute14-value edit-element-value form-control" maxlength="1000" />
                        </div>
                    </div>
                    <div class="attribute15-element edit-panel-element">
                        <div class="attribute15-label edit-element-label">attribute15:</div>
                        <div class="input-div">
                            <textarea class="attribute15-value edit-element-value form-control" maxlength="4000" />
                        </div>
                    </div>
                    <div class="attribute16-element edit-panel-element">
                        <div class="attribute16-label edit-element-label">attribute16:</div>
                        <div class="input-div">
                            <textarea class="attribute16-value edit-element-value form-control" maxlength="4000" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-div">
                <button type="button" class="save-button btn btn-success">
                    Save
                </button>
                <button type="button" class="cancel-button btn btn-primary">
                    Cancel
                </button>
            </div>
        </div>

        <div class="data-panel lookup-panel panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"></div>
                <div class="button-wrap">
                    <div class="edit-button"></div>
                    <div class="delete-button"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="id-element field-element">
                    <div class="field-label id-label body-element-label">id:</div>
                    <div class="field-value id-value body-element-value"></div>
                </div>
                <div class="code-element field-element">
                    <div class="field-label code-label body-element-label">code:</div>
                    <div class="field-value code-value body-element-value"></div>
                </div>
                <div class="name-element field-element">
                    <div class="field-label name-label body-element-label">name:</div>
                    <div class="field-value name-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="field-label description-label body-element-label">description:</div>
                    <div class="field-value description-value body-element-value"></div>
                </div>
                <div class="item-list-wrap lookup-item-list-wrap">
                    <div class="lookup-item-list-label body-element-label">items:</div>
                    <div class="lookup-item-list-button-wrap">
                        <div class="item-list-show-button lookup-item-list-show-button" title="Show Lookup Item List">
                        </div>
                        <div class="item-add-button add-lookup-item-button" title="Add Lookup Item"></div>
                    </div>
                    <div class="add-item-panel add-lookup-item-panel panel-body">
                        <ul class="nav nav-tabs">
                            <li class="add-item-tab add-lookup-item-tab active">
                                <a href="#" data-toggle="tab">Add Lookup Item</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="add-new-lookup-item tab-pane fade in active">
                                <div class="add-new-item-panel add-new-lookup-item-panel panel panel-primary">
                                    <div class="code-element edit-panel-element">
                                        <div class="code-label edit-element-label required">code:</div>
                                        <div class="input-div">
                                            <input name="code" class="code-value edit-element-value form-control"
                                                maxlength="30" />
                                        </div>
                                    </div>
                                    <div class="name-element edit-panel-element">
                                        <div class="name-label edit-element-label required">name:</div>
                                        <div class="input-div">
                                            <input name="name" class="name-value edit-element-value form-control"
                                                maxlength="80" />
                                        </div>
                                    </div>
                                    <div class="value-element edit-panel-element">
                                        <div class="value-label edit-element-label required">value:</div>
                                        <div class="input-div">
                                            <input name="value" class="value-value edit-element-value form-control"
                                                maxlength="100" />
                                        </div>
                                    </div>
                                    <div class="order-element edit-panel-element">
                                        <div class="order-label edit-element-label required">order:</div>
                                        <div class="input-div">
                                            <input name="order" name="order" type="number" min="1" step="1"
                                                class="order-value edit-element-value form-control" maxlength="30" />
                                        </div>
                                    </div>
                                    <div class="description-element edit-panel-element">
                                        <div class="description-label edit-element-label">description:</div>
                                        <div class="input-div">
                                            <textarea
                                                class="description-value-textarea edit-element-value form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="other-attribute-wrap">
                                        <div class="show-other-attribute-button"></div>
                                        <div class="other-attribute">
                                            <div class="attribute1-element edit-panel-element">
                                                <div class="attribute1-label edit-element-label">attribute1:</div>
                                                <div class="input1-div">
                                                    <input class="attribute1-value edit-element-value form-control"
                                                        maxlength="100" />
                                                </div>
                                            </div>
                                            <div class="attribute2-element edit-panel-element">
                                                <div class="attribute2-label edit-element-label">attribute2:</div>
                                                <div class="input-div">
                                                    <input class="attribute2-value edit-element-value form-control"
                                                        maxlength="100" />
                                                </div>
                                            </div>
                                            <div class="attribute3-element edit-panel-element">
                                                <div class="attribute3-label edit-element-label">attribute3:</div>
                                                <div class="input-div">
                                                    <input class="attribute3-value edit-element-value form-control"
                                                        maxlength="100" />
                                                </div>
                                            </div>
                                            <div class="attribute4-element edit-panel-element">
                                                <div class="attribute4-label edit-element-label">attribute4:</div>
                                                <div class="input-div">
                                                    <input class="attribute4-value edit-element-value form-control"
                                                        maxlength="100" />
                                                </div>
                                            </div>
                                            <div class="attribute5-element edit-panel-element">
                                                <div class="attribute5-label edit-element-label">attribute5:</div>
                                                <div class="input-div">
                                                    <input class="attribute5-value edit-element-value form-control"
                                                        maxlength="200" />
                                                </div>
                                            </div>
                                            <div class="attribute6-element edit-panel-element">
                                                <div class="attribute6-label edit-element-label">attribute6:</div>
                                                <div class="input-div">
                                                    <input class="attribute6-value edit-element-value form-control"
                                                        maxlength="200" />
                                                </div>
                                            </div>
                                            <div class="attribute7-element edit-panel-element">
                                                <div class="attribute7-label edit-element-label">attribute7:</div>
                                                <div class="input-div">
                                                    <input class="attribute7-value edit-element-value form-control"
                                                        maxlength="200" />
                                                </div>
                                            </div>
                                            <div class="attribute8-element edit-panel-element">
                                                <div class="attribute8-label edit-element-label">attribute8:</div>
                                                <div class="input-div">
                                                    <input class="attribute8-value edit-element-value form-control"
                                                        maxlength="200" />
                                                </div>
                                            </div>
                                            <div class="attribute9-element edit-panel-element">
                                                <div class="attribute9-label edit-element-label">attribute9:</div>
                                                <div class="input-div">
                                                    <input class="attribute9-value edit-element-value form-control"
                                                        maxlength="200" />
                                                </div>
                                            </div>
                                            <div class="attribute10-element edit-panel-element">
                                                <div class="attribute10-label edit-element-label">attribute10:</div>
                                                <div class="input-div">
                                                    <input class="attribute10-value edit-element-value form-control"
                                                        maxlength="200" />
                                                </div>
                                            </div>
                                            <div class="attribute11-element edit-panel-element">
                                                <div class="attribute11-label edit-element-label">attribute11:</div>
                                                <div class="input-div">
                                                    <textarea class="attribute11-value edit-element-value form-control"
                                                        maxlength="1000" />
                                                </div>
                                            </div>
                                            <div class="attribute12-element edit-panel-element">
                                                <div class="attribute12-label edit-element-label">attribute12:</div>
                                                <div class="input-div">
                                                    <textarea class="attribute12-value edit-element-value form-control"
                                                        maxlength="1000" />
                                                </div>
                                            </div>
                                            <div class="attribute13-element edit-panel-element">
                                                <div class="attribute13-label edit-element-label">attribute13:</div>
                                                <div class="input-div">
                                                    <textarea class="attribute13-value edit-element-value form-control"
                                                        maxlength="1000" />
                                                </div>
                                            </div>
                                            <div class="attribute14-element edit-panel-element">
                                                <div class="attribute14-label edit-element-label">attribute14:</div>
                                                <div class="input-div">
                                                    <textarea class="attribute14-value edit-element-value form-control"
                                                        maxlength="1000" />
                                                </div>
                                            </div>
                                            <div class="attribute15-element edit-panel-element">
                                                <div class="attribute15-label edit-element-label">attribute15:</div>
                                                <div class="input-div">
                                                    <textarea class="attribute15-value edit-element-value form-control"
                                                        maxlength="4000" />
                                                </div>
                                            </div>
                                            <div class="attribute16-element edit-panel-element">
                                                <div class="attribute16-label edit-element-label">attribute16:</div>
                                                <div class="input-div">
                                                    <textarea class="attribute16-value edit-element-value form-control"
                                                        maxlength="4000" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-wrap">
                            <button type="button" class="ok-button btn btn-success">
                                OK
                            </button>
                            <button type="button" class="reset-button btn btn-info">
                                Reset
                            </button>
                            <button type="button" class="close-button btn btn-primary">
                                Close
                            </button>
                        </div>
                    </div>
                    <div class="item-table">
                        <div class="item-list">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="windows">
    </div>
</div>

<link type="text/css" rel="stylesheet"
    href="/static/clientlibs/tattoo/datacenter/component/lookup-component/css/lookup-component.css" />
<script type="text/javascript"
    src="/static/clientlibs/tattoo/datacenter/component/lookup-component/js/lookup-component.js"></script>